import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Avatar } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
const getLabel = Tools.getLabel;

@withRouter
@inject('userCenterStore')
@observer
export default class Visitor extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-visitor'
  }

  constructor(props) {
    super(props);
    this.state = {
      page: null,
    }
  }

  componentDidMount() {
    const { location: { pathname } } = this.props;
    if (pathname === '/userCenter/visitor') {//access:最近访问; visitor:最近来访
      this.setState({ page: 'visitor' })
    }
    if (pathname === '/userCenter/access') {
      this.setState({ page: 'access' })
    }
  }

  getTemplate = () => {
    const listStyle = 'blog-list-line';
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const { imageUrl, lastname, visitdatetime,userid } = data;

          return (
            <div className={listStyle}>
              <div className={`${listStyle}-userInfo`}>
                <Avatar userId={userid} style={{width:40, height:40}} />
                <div className={`${listStyle}-userInfo-content`}>
                  <span className='lastName text-wrap'>{lastname}</span>
                  <span className='time'>{visitdatetime}</span>
                </div>
              </div>
            </div>
          )
        }
      }]
    }
    return newTemp;
  }

  render() {
    const { prefixCls, userCenterStore, parentPath, setUid } = this.props;
    const { visitorsList, accessPageList, getVisitorList, getAccessList, getFirstList } = userCenterStore;
    const { page } = this.state;
    return (
      <div className={prefixCls}>
        <ListViewPage.Normal
          store={page === 'visitor' ? visitorsList : accessPageList}
          getDataCustom
          customHeight='100%'
          rowKey='userid'
          getTemplate={this.getTemplate}
          renderHeader={() => (
            <div className={`${prefixCls}-title`}>{page === 'visitor' ? getLabel('26934','最近来访') : getLabel('26935','最近访问') }</div>
          )}
          onEndReached={page === 'visitor' ? getVisitorList : getAccessList}
          onRefresh={() => getFirstList(page)}
          onRowClick={data => {
            setUid(data.userid, () => {
              this.props.history.push(parentPath + "/hisBlog/" + data.userid);
            })
          }}
        />
      </div>
    )
  }
}